let regMsg = [
    /^[A-Za-z0-9]{6,20}$/,
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
    /^\d{6}$/,
    /^[A-Za-z0-9^%&',;=?$\x22]{6,12}$/
]
let inp = document.querySelectorAll('.inp');
let message = document.querySelectorAll('.message');
let imgBox = document.querySelectorAll('.imgBox');

inp.forEach(function(dom, index) {
    dom.addEventListener('blur', function() {
        if (regMsg[index].test(this.value)) {
            message[index].classList.remove('block');
        } else {
            message[index].classList.add('block');
        }
    });
    dom.addEventListener('input', function() {
        if (inp[index].value.length > 0) {
            imgBox[index].style.display = 'inline-block';
        } else {
            imgBox[index].style.display = 'none';
        }
    });

});
imgBox.forEach(function(a, b) {
    a.addEventListener('click', function() {
        inp[b].value = '';
        // console.log(1);
        imgBox[b].style.display = 'none';
        message[b].style.display = 'inline-block';
    })
})



// 点击需求事件验证
let selected = document.querySelector('#selected');
let btn = document.querySelector('#btn');

let count = 0; // 点击次数

selected.addEventListener('change', function() {
    if (++count % 2) {
        // 奇数次
        btn.disabled = false;
        btn.style.backgroundColor = '#00bdff'
    } else {
        // 偶数次
        btn.disabled = true;
        btn.style.backgroundColor = '#ccc'
    }
})


// 点击btn，验证信息的合法性
btn.addEventListener('click', function() {
    // 依次验证
    for (var i = 0; i < inp.length; i++) {
        if (!regMsg[i].test(inp[i].value)) {
            message[i].classList.add('block')
            return;
        }
    }
    // 全部验证
    // inp.forEach(function (i, v) {
    //     if (!regMsg[v].test(this.value)) {
    //         message[i].classList.add('block')
    //     }
    // })

    location.href = './seccess.html';
    user.value = tel.value = num.value = pwd.value = '';
})


// 获取用户名
let user = document.querySelector('#user');
// 获取用户手机号
let tel = document.querySelector('#tel');
// 获取验证码点击事件
let gain = document.querySelector('#gain');

// 获取图片事件
let imgBox1 = document.querySelector('.imgbox1');
let imgBox2 = document.querySelector('.imgbox2');

// 判断如果电话信息输入可以利用获取验证码按钮
if (user && tel) {
    // 开始按钮是禁止的
    gain.disabled = true;
    // 账号和电话号码全部正确才能点击获取验证码
    user.addEventListener, tel.addEventListener('blur', function() {
        if (regMsg[0].test(user.value) && regMsg[1].test(tel.value)) {
            gain.disabled = false;
        }
    });
    // 获取span变动标签
    let timeBox = document.querySelector('#timeBox');
    // 点击获取验证码
    gain.addEventListener('click', function() {
        // 定义变量保存时间
        let times = 6;
        // 先禁用按钮
        gain.disabled = true;
        let timeId = setInterval(function() {
            // 自减后渲染到timeBox上
            timeBox.textContent = --times + 's';
            // 判断
            if (times <= 0) {
                btn.disabled = false; //取消禁止
                clearInterval(timeId); //关闭计时器
                timeBox.textContent = '获取验证码'; //重新赋值
                gain.disabled = false; //可以多次获取验
            }
        }, 1000);
        // 获取验证码时，不能更改电话号码和用户名
        user.disabled = true;
        tel.disabled = true;
        // 清除键不能点击
        imgBox1.style.pointerEvents = 'none';
        imgBox2.style.pointerEvents = 'none';
    })
};